import React, { Component } from 'react';
import { Upload, Icon, Modal } from 'antd';
import { RemoveImg } from "../../../api/index"

class PicturesWall extends Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };


  componentDidMount() {
    // {
    //   uid: '-1',
    //   name: 'image.png',
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    // },
    if (this.props.proPictures) {
      let fileList = this.props.proPictures.map((item, index) => {
        return {
          uid: -index,
          name: item,
          status: "done",
          url: item
        }
      })
      this.setState({
        fileList
      })
    }

  }

  // 获取上传的图片
  getImg = () => {
    const images = this.state.fileList.map(item => item.url)
    return images;
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handleChange = async ({ file, fileList }) => {
    // console.log(file, fileList)
    let { status, response } = file

    if (status === "done") {
      file = fileList[fileList.length - 1];
      file.name = response.name;
      file.url = response.filename;
    }

    if (status === "removed") {
      const data = await RemoveImg({ name: file.name })
      console.log(data)
    }
    this.setState({ fileList },)

  };

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Upload
          action="/image/upload"
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          name="image"
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}

export default PicturesWall;